<template>
    <div v-if="formData && formData.length > 0" class="release-content">
        <Tabs style="height: 100%">
            <TabPane v-for="(data, i) in formData" :key="data.server.endpointUrl" :label="data.server.hostName + '-' + data.server.envTag">
                <Form ref="configFrom" :model="data" style="padding: 0 16px 16px 16px;">
                    <div class="config-title">
                        <span>端口映射</span>
                        <Button type="dashed" @click="portAdd(i)" icon="md-add" style="margin-left: 8px">Add item
                        </Button>
                    </div>
                    <div v-for="(port, index) in data.config.ports" :key="i + 'port' + index" class="config-item">
                        <FormItem  :prop="'config.ports[' + index + '].server'" :rules="{required: true, message: '服务器端口不能为空', trigger: 'blur', type: 'number'}">
                            <Input v-model="port.server" placeholder="host" style="width: 175px" :number="true"></Input>
                        </FormItem>
                        <Icon type="md-arrow-round-forward"/>
                        <FormItem  :prop="'config.ports[' + index + '].container'" :rules="{required: true, message: '容器端口不能为空', trigger: 'blur', type: 'number'}">
                            <Input v-model="port.container" placeholder="container" style="width: 175px" :number="true"></Input>
                        </FormItem>
                        <ButtonSwitch v-model="port.isTcp" text1="TCP" text2="UDP"></ButtonSwitch>
                        <Button type="error" @click="deleteData('ports', i, index)">
                            <Icon size="14" type="ios-trash"/>
                        </Button>
                    </div>

                    <div class="config-title">
                        <span>环境变量</span>
                        <Button type="dashed" @click="envAdd(i)" icon="md-add" style="margin-left: 8px">Add item</Button>
                    </div>
                    <div v-for="(env, index) in data.config.envs" :key="i + 'env' + index" class="config-item">
                        <FormItem  :prop="'config.envs[' + index + '].name'" :rules="{required: true, message: '参数名称不能为空', trigger: 'blur'}">
                            <Input v-model="env.name" placeholder="name" style="width: 235px"></Input>
                        </FormItem>
                        <Icon type="md-arrow-round-forward"/>
                        <FormItem  :prop="'config.envs[' + index + '].value'" :rules="{required: true, message: '参数值不能为空', trigger: 'blur'}">
                            <Input v-model="env.value" placeholder="value" style="width: 235px"></Input>
                        </FormItem>
                        <Button type="error" @click="deleteData('envs', i, index)">
                            <Icon size="14" type="ios-trash"/>
                        </Button>
                    </div>

                    <div class="config-title">
                        <span>文件挂载</span>
                        <Button type="dashed" @click="volumeAdd(i)" icon="md-add" style="margin-left: 8px">Add item</Button>
                    </div>
                    <div v-for="(vol, index) in data.config.volumes" :key="i + 'vol' + index">
                        <div class="config-item">
                            <FormItem  :prop="'config.volumes[' + index + '].server'" :rules="{required: true, message: '服务器路径不能为空', trigger: 'blur'}" style="width: 498px">
                                <Input v-model="vol.server" placeholder="e.g. /path/on/host"></Input>
                            </FormItem>
                            <Button type="error" @click="deleteData('volumes', i, index)">
                                <Icon size="14" type="ios-trash"/>
                            </Button>
                        </div>
                        <div class="config-item">
                            <Icon type="md-arrow-round-forward"/>
                            <FormItem  :prop="'config.volumes[' + index + '].container'" :rules="{required: true, message: '容器器路径不能为空', trigger: 'blur'}" style="width: 75%">
                                <Input v-model="vol.container" placeholder="e.g. /path/in/container"></Input>
                            </FormItem>
                            <ButtonSwitch v-model="vol.readonly" :def="false" text1="可写" text2="只读"></ButtonSwitch>
                        </div>
                    </div>

                    <div class="config-title">
                        <span>域名解析</span>
                        <Button type="dashed" @click="extraHostAdd(i)" icon="md-add" style="margin-left: 8px">Add item</Button>
                    </div>
                    <div v-for="(extra, index) in data.config.extraHosts" :key="i + 'ext' + index" class="config-item">
                        <FormItem  :prop="'config.extraHosts[' + index + '].domain'" :rules="{required: true, message: '域名不能为空', trigger: 'blur'}">
                            <Input v-model="extra.domain" placeholder="domain" style="width: 235px"></Input>
                        </FormItem>
                        <Icon type="md-arrow-round-forward"/>
                        <FormItem  :prop="'config.extraHosts[' + index + '].ip'" :rules="{required: true, message: 'ip不能为空', trigger: 'blur'}">
                            <Input v-model="extra.ip" placeholder="ip" style="width: 235px"></Input>
                        </FormItem>
                        <Button type="error" @click="deleteData('extraHosts', i, index)">
                            <Icon size="14" type="ios-trash"/>
                        </Button>
                    </div>

                    <div class="config-title">
                        <span>重启策略</span>
                        <Select v-model="data.config.restart" style="width: calc(100% - 80px); margin-left: 8px">
                            <Option value="Never">Never</Option>
                            <Option value="Always">Always</Option>
                            <Option value="Failure">Failure</Option>
                            <Option value="Stopped">Stopped</Option>
                        </Select>
                    </div>
                </Form>

                <div class="tab-footer">
                    <Button type="primary" @click="releaseRun(i)" :loading="loading[i]">Run</Button>
                </div>
            </TabPane>
        </Tabs>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                formData: [],
                loading:[]
            }
        },
        props: {
            imageId: String
        },
        created() {

        },
        methods: {
            portAdd(i) {
                this.formData[i].config.ports.push({
                    server: null,
                    container: null,
                    isTcp: true
                });
            },
            envAdd(i) {
                this.formData[i].config.envs.push({
                    name: '',
                    value: ''
                });
            },
            volumeAdd(i) {
                this.formData[i].config.volumes.push({
                    server: '',
                    container: '',
                    readonly: false
                });
            },
            extraHostAdd(i) {
                this.formData[i].config.extraHosts.push({
                    domain: '',
                    ip: ''
                });
            },
            deleteData(item, i, index){
                this.formData[i].config[item].splice(index, 1);
            },
            releaseRun(i){
                this.$refs['configFrom'][i].validate(valid => {
                    if (valid) {
                        this.loading[i] = true;
                        this.$forceUpdate();
                        this.$nextTick(()=>{
                            this.$axios.post('/mdo/api/v1/app/' + this.$route.params.id + '/image/' + this.imageId + '/release', this.formData[i]).then(res => {
                                if (res.status === 200) {
                                    this.loading[i] = false;
                                    this.$forceUpdate();
                                    this.$Message.success('success!');
                                }
                            }).catch(e =>{
                                this.$Message.error(e.response.data);
                            });
                        });
                    }
                });
            }
        },
        watch: {
            imageId(val) {
                this.$axios.get('/mdo/api/v1/app/' + this.$route.params.id + '/image/' + val + '/container/config').then(res => {
                    this.formData = res.data;
                    this.loading = [];
                    for (let i = 0; i < res.data.length; i++) {
                        this.loading.push(false);
                    }
                });
            }
        }
    }
</script>

<style lang="less" scoped>
    .release-content{
        height: 100%;
        .config-title {
            display: flex;
            align-items: center;
            margin: 36px 0 8px 0;

            &:first-child{
                margin-top: 0;
            }

            span{
                color: #464c5b;
                font-weight: bold;
            }
        }

        .config-item {
            display: flex;
            align-items: center;
            margin-bottom: 24px;
            margin-left: 56px;
            & > * {
                margin-right: 8px;
            }
            &:last-child {
                margin-right: 0;
            }
        }

        .tab-footer {
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            border-top: 1px solid #e8e8e8;
            padding: 10px 16px;
            text-align: right;
            background: #fff;
        }
    }

</style>

<style lang="less">
    .release-content{
        .ivu-tabs-content{
            height: calc(~"100% - 55px");
            .ivu-tabs-tabpane{
                position: relative;

                .ivu-form-item{
                    margin-bottom: 0px;
                }
            }
        }
    }
</style>